@import "../../../stylesheet/default.scss";
@import "../../../stylesheet/mixin.scss";
@import "../../../stylesheet/animations.scss";

$prefix: m-button;

.#{$prefix}-margin{
	margin: {
		left: $marginTiny;
		top: $marginTiny;
	};
}

.#{$prefix}-default {
  border: none;
  outline: none;
  user-select: none;
  font-weight: 400;
  box-sizing: border-box;
	z-index: $button-level;
  .#{$prefix}-temp-div {
    @include flex_average;
		position: relative;
    top: 2px;
    i {
      margin-right: 10px;
    }
  }
}

.#{$prefix}-font-color-white {
  color: $font-default-color-white;
}

.#{$prefix}-font-color-black {
  color: $font-default-color-black;
}

.#{$prefix}-size-normal {
	padding: $button-size-normal;
	div{
		font-size: $button-normal-font-size;
	}
}

.#{$prefix}-size-small {
	padding: $button-size-small;
	*{
		font-size: $button-small-font-size;
	}
}

.#{$prefix}-size-tiny {
	padding: $button-size-tiny;
	*{
		font-size: $button-small-font-size;
	}
}

.#{$prefix}-size-large {
	padding: $button-size-large;
	*{
		font-size: $button-large-font-size;
	}
}

.#{$prefix}-shape-fillet {
  @include shape_fillet;
}

.#{$prefix}-shape-circle {
  @include shape_circle;
}

.#{$prefix}-click-static {
  &:active {
    outline: $button-outline;
  }
}
.#{$prefix}-hover-static {
  &:hover {
    outline: $button-outline;
  }
}
.#{$prefix}-disabled {
  cursor: url($forbidPath), auto;
}

@each $type in hover, click {
  @each $var in down, up, left, right, scale {
    @if ($type == hover) {
      .#{$prefix}-#{$type}-#{$var} {
        @if ($var == down) {
          @include effect_hover_down;
        } @else if($var == up) {
          @include effect_hover_up;
        } @else if($var == left) {
          @include effect_hover_left;
        } @else if($var == right) {
          @include effect_hover_right;
        } @else if($var == scale) {
          @include effect_hover_scale;
        }
      }
    } @else if($type == click) {
      .#{$prefix}-#{$type}-#{$var} {
        @if ($var == down) {
          @include effect_active_down;
        } @else if($var == up) {
          @include effect_active_up;
        } @else if($var == left) {
          @include effect_active_left;
        } @else if($var == right) {
          @include effect_active_right;
        } @else if($var == scale) {
          @include effect_active_scale;
        }
      }
    }
  }
}
